<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="开始时间">
        <el-date-picker
          type="date"
          placeholder="请选择开始时间"
          v-model="queryParams.signerTimeBegin"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="date"
          placeholder="请选择结束时间"
          v-model="queryParams.signerTimeEnd"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
        >
          <el-option label="新建" :value="0" />
          <el-option label="待校长确认" :value="1" />
          <el-option label="待总部BSC确认" :value="2" />
          <el-option label="待总部财务确认" :value="3" />
          <el-option label="确认完成" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="编号">
        <el-input
          v-model="queryParams.contractCode"
          placeholder="请输入编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="合同编号">
        <el-input
          v-model="queryParams.contractCode"
          placeholder="请输入合同编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="学员姓名">
        <el-input
          v-model="queryParams.signerName"
          placeholder="请输入学员姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="学员编号">
        <el-input
          v-model="queryParams.signerName"
          placeholder="请输入学员编号"
          clearable
        />
      </el-form-item>

      <el-form-item label="是否内部退费" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择是否内部退费"
          clearable
        >
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="contractList">
      <el-table-column
        label="编号"
        align="center"
        prop="contractRefundCode"
        min-width="100"
      />

      <el-table-column label="退费总金额" align="center" prop="totalMoney" />
      <el-table-column
        label="合同编号"
        align="center"
        prop="contractCode"
        min-width="100"
      />
      <el-table-column
        label="客户编号"
        align="center"
        prop="customerCode"
        min-width="130"
      />
      <el-table-column label="姓名" align="center" prop="customerName" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{ row }">
          <span>{{
            row.status == 0
              ? "新建"
              : row.status == 1
              ? "待校长确认"
              : row.status == 2
              ? "待总部BSC确认"
              : row.status == 3
              ? "待总部财务确认"
              : row.status == 4
              ? "确认完成"
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否内部退费" align="center">
        <template #default="{ row }">
          <span>{{
            row.isInternal == 0 ? "否" : row.isInternal == 1 ? "是" : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        min-width="150"
      />
      <el-table-column
        label="校长确认时间"
        align="center"
        prop="cashierApproveTime"
        min-width="150"
      />
      <el-table-column
        label="BSC确认时间"
        align="center"
        prop="bscApproveTime"
        min-width="150"
      />
      <el-table-column
        label="财务确认时间"
        align="center"
        prop="financeApproveTime"
        min-width="150"
      />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleDetail(scope.row)"
          >
            详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改合同对话框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialog.visible"
      width="50%"
      append-to-body
    >
      <el-button type="primary" size="small" @click="confirmReport('agree')">
        确认
      </el-button>
      <el-button type="danger" size="small" @click="confirmReport('disagree')">
        驳回
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="openFormDialog"
      >
        填写挽单报告
      </el-button>
      <div>
        <FormContainer title="详细信息">
          <template #default>
            <el-descriptions :column="2" border>
              <template slot="title"> 一、退单详细资料 </template>

              <el-descriptions-item>
                <template slot="label"> 合同编号 </template>
                {{ dialog.data.contractCode }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 学员姓名 </template>
                {{ dialog.data.customerName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 年级 </template>
                {{ formatGrade(dialog.data.grade) }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 合同课时 </template>
                {{ dialog.data.classTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 签约金额 </template>
                {{ dialog.data.totalMoney }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 已交费用 </template>
                {{ dialog.data.payMoney }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 签约时间 </template>
                {{ dialog.data.createTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-table
              :data="dialog.data.contractRefundLabelList"
              border
              stripe
              style="margin-top: 10px"
            >
              <el-table-column label="序号" type="index" align="center" />
              <el-table-column
                label="签约科目"
                align="center"
                prop="subjectClassName"
              />
              <el-table-column
                label="合同课时"
                align="center"
                prop="classTime"
              />
              <el-table-column
                label="已上课时"
                prop="duringClassTime"
                align="center"
              />
              <el-table-column
                label="发生费用"
                prop="spendMoney"
                align="center"
              />
              <el-table-column
                label="退费课时"
                prop="refundClassTime"
                align="center"
              />
              <el-table-column
                label="退费单价"
                prop="refundPrice"
                align="center"
              />
              <el-table-column
                label="退还金额"
                prop="refundMoney"
                align="center"
              />
            </el-table>

            <el-descriptions :column="2" border style="margin-top: 10px">
              <template slot="title"> 二、应扣费用 </template>

              <el-descriptions-item>
                <template slot="label"> 应扣费用 </template>

                <span style="color: red">
                  {{ dialog.data.controllerMoney }} </span
                >(管理费)
              </el-descriptions-item>
            </el-descriptions>
            <div>
              <p>1. 退费时，赠送的课时应当扣除，不在退费范围内</p>
              <p>2. 退费的总金额应包含0元管理费</p>
              <p>
                3. 已上课时12课时以上（含12课时）：退款金额 = 已交款项 -
                已上课时 x 合同单价 x 100%
              </p>
            </div>
            <el-descriptions :column="2" border style="margin-top: 10px">
              <template slot="title"> 三、应退款金额 </template>
              <el-descriptions-item>
                <template slot="label"> 应退款金额 </template>
                <span style="color: red"> {{ dialog.data.deductible }} </span
                >(退还金额 - 应扣总费用)
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </FormContainer>
        <FormContainer title="挽单报告">
          <template #default>
            <el-descriptions :column="1" border>
              <el-descriptions-item>
                <template slot="label"> 退费过程及原因分析 </template>
                {{ dialog.data.contractRefundReport.context }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 备注 </template>
                {{ dialog.data.contractRefundReport.note }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </FormContainer>
        <FormContainer title="操作记录">
          <template #default>
            <el-table
              :data="dialog.data.contractRefundLogList"
              border
              stripe
              style="margin-top: 10px"
            >
              <el-table-column label="用户" prop="createBy" align="center" />
              <el-table-column label="时间" align="center" prop="createTime" />
              <el-table-column label="操作" prop="operate" align="center" />
            </el-table>
          </template>
        </FormContainer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="填写挽单报告"
      :visible.sync="formDialog.visible"
      width="50%"
      append-to-body
    >
      <el-form
        :model="formDialog.data"
        label-width="140px"
        :rules="refundRules"
        ref="refundForm"
        label-position="top"
      >
        <el-form-item label="退费过程及原因分析" prop="context">
          <el-input
            v-model="formDialog.data.context"
            type="textarea"
            clearable
            placeholder="请输入退费过程及原因分析"
            :autosize="{ minRows: 4, maxRows: 4 }"
          />
        </el-form-item>
        <p class="note">不少于一百字</p>
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="formDialog.data.note"
            type="textarea"
            clearable
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
          />
        </el-form-item>
        <p class="note">客户满意度中心回访需注意事项，如恶性投诉、号码错误等</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormDialog">确 定</el-button>
        <el-button @click="cancelDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRefund,
  getRefundDetail,
  refundApprove,
  AddReport,
  refundUnApprove,
} from "@/api/system/contract";

import campusSelect from "@/components/Select/campusSelect.vue";
import userSelect from "@/components/Select/userSelect.vue";

export default {
  name: "Contract",
  components: {
    campusSelect,
    userSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同表格数据
      contractList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      dialog: {
        visible: false,
        data: {},
      },
      formDialog: {
        visible: false,
        data: {},
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        week: 1,
      },

      refundRules: {
        context: [
          { required: true, message: "请输入退费原因", trigger: "blur" },
        ],
      },

      // 年级选项
      gradeOpiton: [],
      //合同类型
      dictType: [],
      // 表单验证规则

      //用户列表
      customerList: [],
    };
  },
  created() {
    this.getList();
    // 获取合同列表
  },
  methods: {
    /** 查询合同列表 */
    getList() {
      this.loading = true;
      getRefund(this.queryParams).then((response) => {
        this.contractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        week: 1,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleDetail({ id }) {
      getRefundDetail(id).then((res) => {
        if (res.code == 200) {
          this.dialog.visible = true;
          this.dialog.data = res.data;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.dialog.visible = false;
      this.dialog.data = {};
    },

    cancel() {
      this.dialog.visible = false;
      this.dialog.data = {};
    },

    formatGrade(grade) {
      const gradeOpiton = [
        { value: 0, label: "小一" },
        { value: 1, label: "小二" },
        { value: 2, label: "小三" },
        { value: 3, label: "小四" },
        { value: 4, label: "小五" },
        { value: 5, label: "小六" },
        { value: 6, label: "初一" },
        { value: 7, label: "初二" },
        { value: 8, label: "初三" },
        { value: 9, label: "高一" },
        { value: 10, label: "高二" },
        { value: 11, label: "高三" },
        { value: 12, label: "高四" },
      ];
      return _.find(gradeOpiton, { value: grade })?.label || "未知年级";
    },

    openFormDialog() {
      this.formDialog.data = {};
      this.formDialog.data.contractRefundId = this.dialog.data.id;
      this.formDialog.data.id = this.dialog.data.contractRefundReport.id
        ? this.dialog.data.contractRefundReport.id
        : "";
      this.formDialog.visible = true;
    },

    cancelDialog() {
      this.formDialog.visible = false;
    },

    submitFormDialog() {
      this.$refs["refundForm"].validate((valid) => {
        if (valid) {
          AddReport(this.formDialog.data).then((res) => {
            if (res.code === 200) {
              this.$message.success("挽单报告添加成功");
              this.formDialog.visible = false;
              getRefundDetail(this.dialog.data.id).then((res) => {
                if (res.code == 200) {
                  this.dialog.data = res.data;
                }
              }); // 刷新合同数据
            } else {
              this.$message.error(res.msg || "挽单报告添加失败");
            }
          });
        }
      });
    },

    confirmReport(type) {
      if (type == "agree") {
        refundApprove(this.dialog.data.id).then((res) => {
          if (res.code === 200) {
            this.$message.success("审批通过");
            this.formDialog.visible = false;
            getRefundDetail(this.dialog.data.id).then((res) => {
              if (res.code == 200) {
                this.dialog.data = res.data;
              }
            }); // 刷新合同数据
          } else {
            this.$message.error(res.msg || "审核失败");
          }
        });
      } else {
        this.$prompt("请输入驳回原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          refundUnApprove(this.dialog.data.id, value).then((res) => {
            if (res.code === 200) {
              this.$message.success("审批已驳回");
              this.formDialog.visible = false;
              getRefundDetail(this.dialog.data.id).then((res) => {
                if (res.code == 200) {
                  this.dialog.data = res.data;
                }
              }); // 刷新合同数据
            } else {
              this.$message.error(res.msg || "审核失败");
            }
          });
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form {
  &-input {
    width: 400px;
  }
  &-select {
    width: 400px;
  }

  &-date-picker {
    width: 400px;
  }
}

::v-deep {
  .el-dialog__body {
    height: 70vh;
    overflow: auto;
  }
}

.note {
  font-size: 13px;
  color: #ff0000;
}
</style>
